<template>
  <el-form
    size="large"
    ref="loginFormRef"
    :model="registerData"
    :rules="baseRules"
    class="login-content-form"
  >
    <el-form-item class="login-animation1" prop="email">
      <el-input
        text
        :placeholder="'请输入手机号或邮箱'"
        v-model="registerData.email"
        clearable
        autocomplete="off"
      >
        <template #prefix>
          <el-icon class="el-input__icon">
            <Iphone />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation2" prop="password">
      <el-input
        :type="isShowPassword ? 'text' : 'password'"
        :placeholder="'输入密码，至少6位，区分大小写'"
        v-model="registerData.password"
        autocomplete="off"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><Unlock /></el-icon>
        </template>
        <template #suffix>
          <el-icon
            v-if="isShowPassword"
            @click="isShowPassword = !isShowPassword"
            ><View
          /></el-icon>
          <el-icon v-else @click="isShowPassword = !isShowPassword"
            ><Hide
          /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation2" prop="verifyCode">
      <el-col :span="15">
        <el-input
          text
          maxlength="6"
          :placeholder="'请输入验证码'"
          v-model="registerData.verifyCode"
          clearable
          autocomplete="off"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <ChatDotSquare />
            </el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1" />
      <el-col :span="8">
        <el-button
          class="login-content-code"
          @click="handleVerifyCode"
          :disabled="!enableSendVerifyCode"
          >获取验证码</el-button
        >
      </el-col>
    </el-form-item>
    <el-form-item class="login-animation3" prop="captchaCode">
      <el-col :span="15">
        <el-input
          text
          maxlength="6"
          :placeholder="'请输入图形验证码'"
          v-model="registerData.captchaCode"
          clearable
          autocomplete="off"
        >
          <template #prefix>
            <svg-icon icon-class="captcha" class="mx-2" />
          </template>
        </el-input>
      </el-col>
      <el-col :span="1" />
      <el-col :span="8">
        <el-image
          @click="getCaptcha"
          :src="captchaBase64"
          class="captcha-image"
        />
      </el-col>
    </el-form-item>
    <el-form-item class="login-animation3">
      <el-button
        type="primary"
        class="login-content-submit"
        round
        @click="handleLoginSubmit"
        :loading="loading"
      >
        <span>注册</span>
      </el-button>
    </el-form-item>
    <div class="font12 mt30 login-animation4 login-msg">登录</div>
  </el-form>
</template>

<script setup lang="ts">
import { ChatDotSquare, Iphone } from "@element-plus/icons-vue";
import AuthAPI, { RegisterData } from "@/api/auth";
import { LocationQuery, useRoute } from "vue-router";
import { FormInstance } from "element-plus";
import { useUserStore } from "@/store";
import { isEmail, isPhone } from "@/utils/util";

// 定义变量内容
const router = useRouter();
const loading = ref(false);

const registerData = ref<RegisterData>({} as RegisterData);

const isShowPassword = ref(false);
// 使用导入的依赖和库
const userStore = useUserStore();
const route = useRoute();
// 验证码图片Base64字符串
const captchaBase64 = ref();
// 登录表单ref
const loginFormRef = ref<FormInstance>();

/** 获取验证码 */
function getCaptcha() {
  AuthAPI.getCaptcha().then((data) => {
    registerData.value.captchaKey = data.captchaKey;
    captchaBase64.value = data.captchaBase64;
  });
}

/** 解析 redirect 字符串 为 path 和  queryParams */
function parseRedirect(): {
  path: string;
  queryParams: Record<string, string>;
} {
  const query: LocationQuery = route.query;
  const redirect = (query.redirect as string) ?? "/";

  const url = new URL(redirect, window.location.origin);
  const path = url.pathname;
  const queryParams: Record<string, string> = {};

  url.searchParams.forEach((value, key) => {
    queryParams[key] = value;
  });

  return { path, queryParams };
}
const baseRules = reactive({
  email: [
    {
      required: true,
      trigger: "blur",
      message: "请输入邮箱或手机号",
    },
    {
      validator: (rule, value, callback) => {
        if (!isEmail(value) && !isPhone(value)) {
          callback(new Error("请输入正确的邮箱或手机号"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  captchaCode: [
    {
      required: true,
      trigger: "blur",
      message: "请输入图形验证码",
    },
    {
      min: 4,
      trigger: "blur",
      message: "验证码至少4位",
    },
  ],
});
const verifyCodeLoading = ref(false);
const enableSendVerifyCode = ref(true);

function handleVerifyCode() {
  loginFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      verifyCodeLoading.value = true;
      AuthAPI.sendVerifyCode(registerData.value)
        .then(() => {
          ElMessage.success("验证码发送成功");
          enableSendVerifyCode.value = false;
          setTimeout(() => {
            enableSendVerifyCode.value = true;
          }, 30000);
        })
        .catch(() => {
          getCaptcha();
        })
        .finally(() => {
          verifyCodeLoading.value = false;
        });
    }
  });
}
/** 注册表单提交 */
function handleRegisterSubmit() {
  loginFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (!/^\d{6}$/.test(registerData.value.verifyCode)) {
        ElMessage.error("请输入正确的验证码");
        return;
      }
      if (
        !/^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{6,20}$/.test(
          registerData.value.password
        )
      ) {
        ElMessage.error(
          "密码必须只能包含字母、数字或特殊字符，长度在6到20位之间"
        );
        return;
      }
      loading.value = true;

      AuthAPI.register(registerData.value)
        .then(() => {
          ElMessage.success("注册成功，为您自动登录！");
          userStore.login(registerData.value).then(() => {
            const { path, queryParams } = parseRedirect();
            router.push({ path: path, query: queryParams });
          });
        })
        .catch(() => {
          getCaptcha();
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}

onMounted(() => {
  getCaptcha();
});
</script>

<style scoped lang="scss">
@import "@/styles/transition.scss";

.login-content-form {
  margin-top: 20px;
  @for $i from 1 through 4 {
    .login-animation#{$i} {
      opacity: 0;
      animation-name: error-num;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-delay: calc($i/10) + s;
    }
  }

  .login-content-code {
    width: 100%;
    padding: 0;
  }

  .login-content-submit {
    width: 100%;
    letter-spacing: 2px;
    font-weight: 300;
    margin-top: 15px;
  }

  .login-msg {
    color: var(--el-text-color-placeholder);
  }
}
</style>
